{% extends 'mobile/base.html' %}
{% load static%}

{% block mainbody %}
<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  /* 保持原有样式不变 */
  /* 1. 头部样式 */
  header .header {
    background-color: #0abab5; /* Tiffany蓝绿色 */
    padding: 4px 0;
    text-align: center;
    position: relative;
  }
  header .header h1 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
  }
  header .header .return {
    position: absolute;
    left: 15px;
    top: 58%;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
  }
  header .header .return i {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-left: 2px solid white;
    border-top: 2px solid white;
    transform: rotate(-45deg);
  }

  /* 2. 内容区基础样式 */
  .main-container.loginContent {
    padding: 30px 20px;
    background-color: #f5f5f5;
    min-height: calc(100vh - 60px);
    position: relative;
    box-sizing: border-box;
    overflow: hidden; /* 添加overflow隐藏超出部分 */
  }

  /* 3. 登录方式切换样式 */
  .login-type {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .login-type button {
    background: none;
    border: none;
    color: #0abab5; /* Tiffany蓝绿色 */
    padding: 5px 15px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .login-type button.active {
    color: #333;
    font-weight: 500;
  }
  .login-type .divider {
    width: 1px;
    background-color: #ddd;
    margin: 0 5px;
  }

  /* 4. 表单列表样式 */
  .list {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  .list .line {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .list .line li {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    position: relative;
  }
  .list .line li:not(.code):not(.password) {
    border-bottom: 1px solid #eee;
  }
  
  /* 左侧图标样式 */
  .list .line li .left-icon {
    color: #0abab5;
    font-size: 1.2rem;
    margin-right: 15px;
    width: 24px;
    text-align: center;
  }
  
  /* 输入框容器样式 */
  .input-container {
    flex: 1;
    position: relative;
  }
  
  /* 输入框样式 */
  .list .line li input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 5px 0;
    padding-right: 30px; /* 为右侧图标预留空间 */
    color: #333;
  }
  
  /* 右侧图标样式 */
  .input-right-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 1rem;
    cursor: pointer;
  }

  .list .line li.code button,
  .list .line li.password button {
    background-color: #0abab5; /* Tiffany蓝绿色 */
    color: white;
    border: none;
    padding: 4px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .list .line li.code button:hover,
  .list .line li.password button:hover {
    background-color: #09a09b; /* 深一点的Tiffany蓝绿色 */
  }

  /* 5. 登录按钮样式 */
  .button {
    margin-top: 30px;
    padding: 0 10px;
  }
  .button button {
    width: 100%;
    background-color: #0abab5; /* Tiffany蓝绿色 */
    color: white;
    border: none;
    padding: 15px 0;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 4px 12px rgba(10, 186, 181, 0.3); /* Tiffany蓝绿色阴影 */
  }
  .button button:hover {
    background-color: #09a09b; /* 深一点的Tiffany蓝绿色 */
  }

  /* 6. 装饰元素样式 */
  .decor {
    position: absolute;
    background-color: rgba(10, 186, 181, 0.1); /* Tiffany蓝绿色透明背景 */
    border-radius: 50%;
    z-index: 1;
  }
  .decor-1 {
    top: 20%;
    right: 0; /* 调整为右边界对齐 */
    width: 120px;
    height: 120px;
    transform: translateX(50%); /* 只显示一半在页面内 */
  }
  .decor-2 {
    bottom: 10%;
    left: -30px;
    width: 100px;
    height: 100px;
  }

  /* 7. 响应式适配 */
  @media (max-width: 375px) {
    header .header h1 {
      font-size: 1.3rem;
    }
    .list .line li {
      padding: 12px 15px;
    }
    .button button {
      padding: 12px 0;
      font-size: 1rem;
    }
    .decor-1 {
      width: 100px;
      height: 100px;
      right: 0; /* 保持右边界对齐 */
      transform: translateX(50%); /* 保持只显示一半 */
    }
    .decor-2 {
      width: 80px;
      height: 80px;
      left: -25px;
    }
  }
</style>
  <!-- 头部 -->
  <header>
    <div class="header">
      <h1>登录</h1>
      <a href="#" class="return"><i></i></a>
    </div>
  </header>
  <!-- 内容区 -->
  <article class="main-container loginContent">
    <!-- 登录方式切换 -->
    <div class="login-type">
      <button class="active" id="passwordLoginBtn">账号登录</button>
      <div class="divider"></div>
      <button id="codeLoginBtn">验证码登录</button>
    </div>
    
    <div class="list">
  <form action="{% url 'mobile_dologin' %}" method="post">
    {% csrf_token %}
      <ul class="line">
        <!-- 账号登录的用户名输入框 -->
        <li id="usernameField">
          <i class="fas fa-user left-icon"></i>
          <div class="input-container">
            <input type="text" id="username" name="username" placeholder="用户名/账号">
          </div>
        </li>
        
        <!-- 密码登录区域 -->
        <li class="password" id="passwordField">
          <i class="fas fa-lock left-icon"></i>
          <div class="input-container">
            <input type="password" id="password" name="password" placeholder="请输入密码">
          </div>
        </li>
        
        <!-- 验证码登录的手机号输入框 -->
        <li id="phoneField" style="display: none;">
          <i class="fas fa-mobile-alt left-icon"></i>
          <div class="input-container">
            <input type="tel" id="phone" name="mobile" placeholder="手机号码">
          </div>
        </li>
        
    
        <!-- 验证码登录区域 -->
        <li class="code" id="codeField" style="display: none;">
          <i class="fas fa-sms left-icon"></i>
          <div class="input-container">
            <input type="tel" id="code" name="code" placeholder="验证码">
          </div>
          <button type="button" id="getCodeBtn">点击获取</button>
        </li>
      </ul>
    </div>
    <div class="button"><button onclick="login()">登录</button></div>
  </form>
    
    <div style="text-align: center;padding: 10px;">测试验证码：1234</div>
    <div style="text-align: center;padding: 10px;color: #f00;">{{info}}</div>

    <!-- 装饰元素 -->
    <div class="decor decor-1"></div>
    <div class="decor decor-2"></div>
  </article>

  <script>
  // 登录方式切换逻辑
  const passwordLoginBtn = document.getElementById('passwordLoginBtn');
  const codeLoginBtn = document.getElementById('codeLoginBtn');
  const usernameField = document.getElementById('usernameField');
  const passwordField = document.getElementById('passwordField');
  const phoneField = document.getElementById('phoneField');
  const codeField = document.getElementById('codeField');
  
  passwordLoginBtn.addEventListener('click', () => {
    // 切换按钮状态
    passwordLoginBtn.classList.add('active');
    codeLoginBtn.classList.remove('active');
    // 切换显示区域：账号密码登录
    usernameField.style.display = 'flex';
    passwordField.style.display = 'flex';
    phoneField.style.display = 'none';
    codeField.style.display = 'none';
  });
  
  codeLoginBtn.addEventListener('click', () => {
    // 切换按钮状态
    codeLoginBtn.classList.add('active');
    passwordLoginBtn.classList.remove('active');
    // 切换显示区域：验证码登录
    usernameField.style.display = 'none';
    passwordField.style.display = 'none';
    phoneField.style.display = 'flex';
    codeField.style.display = 'flex';
  });
  
  // 验证码倒计时功能
  document.getElementById('getCodeBtn').addEventListener('click', () => {
    const phone = document.getElementById('phone').value;
    if (!phone) {
      alert('请先输入手机号码');
      return;
    }
    
    // 简单验证手机号格式
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      alert('请输入正确的手机号码');
      return;
    }
    
    // 倒计时逻辑
    const btn = document.getElementById('getCodeBtn');
    let count = 60;
    btn.disabled = true;
    btn.textContent = `重新获取(${count}s)`;
    
    const timer = setInterval(() => {
      count--;
      btn.textContent = `重新获取(${count}s)`;
      if (count <= 0) {
        clearInterval(timer);
        btn.disabled = false;
        btn.textContent = '获取验证码';
      }
    }, 1000);
    
    // 实际项目中这里应该调用后端接口发送验证码
    console.log('发送验证码到:', phone);
  });
  
  // 密码显示/隐藏切换功能
  document.getElementById('togglePassword').addEventListener('click', function() {
    const passwordInput = document.getElementById('password');
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);
    
    // 切换图标
    this.classList.toggle('fa-eye');
    this.classList.toggle('fa-eye-slash');
  });
  
  // 登录处理函数
  function login() {
    const isPasswordLogin = passwordLoginBtn.classList.contains('active');
    
    if (isPasswordLogin) {
      // 账号密码登录验证
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      
      if (!username) {
        alert('请输入用户名/账号');
        return;
      }
      
      if (!password) {
        alert('请输入密码');
        return;
      }
      
      // 账号密码登录逻辑
      console.log('账号登录:', { username, password });
    } else {
      // 验证码登录验证
      const phone = document.getElementById('phone').value;
      const code = document.getElementById('code').value;
      
      if (!phone) {
        alert('请输入手机号码');
        return;
      }
      
      // 简单验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        alert('请输入正确的手机号码');
        return;
      }
      
      if (!code) {
        alert('请输入验证码');
        return;
      }
      
      // 验证码登录逻辑
      console.log('验证码登录:', { phone, code });
    }
    
    // 验证成功后提交表单
  document.querySelector('form').submit();
  }
</script>
{% endblock %}